<template>
	<view class="bg-gray">
		<carousel :res="carouselImage" class="bgshare"  height='380' />
		<view class="wrapper width bg-white data">
			<view class="flex-row-between">
				<view class="datatime">
					<view class="datatop flex-row-start color9 font12">
						<image src="https://www.haopengsong.xyz/static/roperty/data.png" mode="widthFix" 
							class="dataicon"></image>
							入住时间
					</view>
					<view class="font16 time bold">
						10月1日
						<text class="color6 font14 day">周三</text>
					</view>
				</view>
				<view class="length">共1晚</view>
				<view class="datatime">
					<view class="datatop flex-row-start color9 font12">
						<image src="https://www.haopengsong.xyz/static/roperty/data.png" mode="widthFix" 
							class="dataicon"></image>
							入住时间
					</view>
					<view class="font16 time bold">
						10月1日
						<text class="color6 font14 day">周三</text>
					</view>
				</view>
			</view>
		</view>
		<view class="listsp">
			<view class="listitem flex-row-between" 
			     @click="jump('/pages/tabbar/roperty/housedetail')"
				v-for="item in 3" :key='item'>
				<image src="https://www.haopengsong.xyz/static/roperty/zufangbg.png" class="bg" mode="aspectFill"></image>
				<view class="info">
					<view class="title font16 bold">岭尚房间{{item}}</view>
					<view class="jieshao font12 color9">
						岭尚小区
					</view>
					<view class="flex-row-between">
						<view class="price yellow">￥0</view>
						<view class="zubtn">马上租</view>
					</view>
				</view>
			</view>
		</view>
		<u-calendar v-model="showCalendar" :mode="'date'" @change="onTimeChange"></u-calendar>
	</view>
</template>

<script>
	import tpl_banner from "@/pages/tabbar/roperty/template/tpl_banner"; 
	export default {
		components: {
			carousel: tpl_banner
		},
		data(){
			return {
				showCalendar:false,
				carouselImage:[
					{ name:"https://www.haopengsong.xyz/static/zufangbg.png"}
				]
			}
		},
		methods:{
			jump(res){
				uni.navigateTo({
					url: res
				});
			},
			/**
			 * 时间选择
			 */
			onTimeChange(res){
				console.log(res)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listitem{
		border-radius: 12px;
		overflow: hidden;
		height: 130px;
		margin-bottom: 10px;
		background-color: #fff;
		.bg{
			width: 40%;
			height: 130px;
		}
		.info{
			width: 58%;
			padding:0 12px;
			.jieshao{
				height: 44px;
				line-height: 22px;
				display: -webkit-box;
			    -webkit-line-clamp: 2;
			    -webkit-box-orient: vertical;
			    overflow: hidden;
			    text-overflow: ellipsis;
			    white-space: normal;
				margin: 10px 0;
			}
		}
	}
	.data{
		padding: 12px 20px;
		border-radius: 12px;
		margin: 10px auto;
		.datatime{
			.dataicon{
				width: 13px;
				height: 13px;
				margin-right: 5px;
			}
		}
		.time{
			margin: 8px 0 0;
		}
		.day{
			font-size: 14px;
			font-weight: normal;
			padding-left: 5px;
		}
	}
	.length,.zubtn{
		background-color: #E5F6E6;
		width: 60px;
		height: 25px;
		line-height: 25px;
		text-align: center;
		color: #499C43;
		font-size: 12px;
		border-radius: 25px;
	}
	.zubtn{
		background-color: #499C43;
		color: #fff;
	}
</style>